<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="box">
    <ul id="nav">
      <li>CF</li>
      <li id="cs">CS</li>
      <li id="dnf">DNF</li>
      <li>梦幻西游</li>
    </ul>
  </div>
  <!-- 删除元素 -->
  <script>
    // 
    var nav = document.getElementById("nav");
    var dnf = document.getElementById("dnf")
    // 1.删除元素  父元素.removeChild(子元素)
    nav.removeChild(dnf)
    //2.删除元素本身  元素.remove()
    var cs = document.getElementById("cs");
    cs.onclick = function () {
      alert(1)
    }
    // 删除元素本身  不能删除其绑定过的事件  所以 用null在清除一次 
    cs.remove();
    cs = null;
  </script>
</body>

</html>